<script setup lang="ts">
import { useDesign } from '@/hooks/web/useDesign'
import { useI18n } from '@/hooks/web/useI18n'
import { ref, reactive } from 'vue'

const { t } = useI18n()

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('panel')

const loading = ref(true)

</script>
<template>
    <div style="width: 100%;">
        <div class="zt">
            <Icon icon="svg-icon:peoples" />
            课程订单统计
        </div>
    </div>
</template>

<style lang="less" scoped>
    .leixing{
        height: 41px;
        text-align: center;
        line-height: 41px;
    }
    .kecheng{
        display: inline-block;
        padding: 10px;
        border: 1px solid #E7E7E7;
    }
    .coursename{
        display: block;
        line-height: 40px;
        padding: 0px 25px 0px 25px;
        text-align: center;
    }
    .look{
        display: block;
        line-height: 40px;
        padding: 0px 25px 0px 25px;
        text-align: center;
        background-color: #F1F1F1;
    }
    .tab{
        width:100%;
    }
    .tab_tr{
        height:80px;
        background-color:#F9FAFC;
        display: inline-block;
        border: 1px solid #E7E7E7;
        margin-bottom: 10px;
    }
    .zt{
        background-color: white;
        height: 50px;
        font:18px/50px "微软雅黑";
        font-weight: bold;
        padding-left: 40px;
        border: 1px solid #E6E6E6;
    }
    .zt2{
        background-color: white;
        height: 50px;
        font:18px/65px "微软雅黑";
        padding-left: 40px;
        margin-bottom: 20px;
    }
@prefix-cls: ~'@{namespace}-panel';

.@{prefix-cls} {
  &__item {
    &--peoples {
      color: #40c9c6;
    }

    &--message {
      color: #36a3f7;
    }

    &--money {
      color: #f4516c;
    }

    &--shopping {
      color: #34bfa3;
    }

    &:hover {
      :deep(.@{namespace}-icon) {
        color: #fff !important;
      }
      .@{prefix-cls}__item--icon {
        transition: all 0.38s ease-out;
      }
      .@{prefix-cls}__item--peoples {
        background: #40c9c6;
      }
      .@{prefix-cls}__item--message {
        background: #36a3f7;
      }
      .@{prefix-cls}__item--money {
        background: #f4516c;
      }
      .@{prefix-cls}__item--shopping {
        background: #34bfa3;
      }
    }
  }
}
</style>
